<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 100 100" >
        
        <defs>
            <clipPath id="clip1">
                <circle cx="50" cy="45" r="20" fill="#f00" fill-opacity="0.8"/>
            </clipPath>
        </defs>


        <rect x="20" y="20" width="60" height="50" fill="#fac" clip-path="url(#clip1)"/>
        <rect x="20" y="20" width="60" height="50" fill="none" stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
    </svg>


    <svg width="400" height="400" viewBox="0 0 100 100" >
        
        <defs>
            <clipPath id="clip2">
                <rect x="30" y="30" width="40" height="40" />
            </clipPath>
        </defs>

        <g clip-path="url(#clip2)">
            <circle cx="50" cy="30" r="15" fill="#fac"/>
            <circle cx="50" cy="70" r="15" fill="#fca"/>
        </g>
        <g stroke="#00f" stroke-width=".5" stroke-dasharray="2.5">
            
            <circle cx="50" cy="30" r="15" fill="none" />
            <circle cx="50" cy="70" r="15" fill="none"/>
        </g>
    </svg>
    <hr>
    <svg width="400" height="400" viewBox="0 0 100 100" >
        <image href="../imgs/1.png" height="100" width="100"/>
    </svg>
    <svg width="400" height="400" viewBox="0 0 100 100" >
        
        <defs>
            <clipPath id="clip3">
                <rect x="30" y="20" width="40" height="40" />
                <rect x="60" y="50" width="40" height="40" />
            </clipPath>
        </defs>

        <image href="../imgs/1.png" height="100" width="100" clip-path="url(#clip3)"/>
    </svg>

    <hr>
    <svg width="400" height="400" viewBox="0 0 100 100" >
        <defs>
            <clipPath id="clip4">
                <text x="50"  y="50" font-size="10" text-anchor="middle" font-weight="bold">I am DMC</text>
            </clipPath>
            <linearGradient  id="gradient1">
                <stop offset="0" stop-color="#f00" stop-opacity="1"/>
                <stop offset=".25" stop-color="#ff0" stop-opacity="1"/>
                <stop offset=".5" stop-color="#0f0" stop-opacity="1"/>
                <stop offset=".75" stop-color="#0ff" stop-opacity="1"/>
                <stop offset="1" stop-color="#00f" stop-opacity="1"/>
            </linearGradient>
        </defs>
        <rect x="20" y="40" width="60" height="40" fill="url(#gradient1)" clip-path="url(#clip4)"/>
        <rect x="20" y="20" width="60" height="10" fill="url(#gradient1)" />
    </svg>
    <hr>

    <svg width="400" height="400" viewBox="0 0 100 100" >
        
        <defs>
            <clipPath id="clip5">
                <rect x="30" y="20" width="40" height="40" />
            </clipPath>
        </defs>

        <image href="../imgs/1.png" height="100" width="100" clip-path="url(#clip5)" transform="rotate(45,50,40)"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100" >
        
        <defs>
            <clipPath id="clip6">
                <rect x="30" y="20" width="40" height="40" />
            </clipPath>
        </defs>

        <g clip-path="url(#clip6)" >
            <image href="../imgs/1.png" height="100" width="100" transform="rotate(45,50,40)"/>
        </g>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100" >
        
        <defs>
            <clipPath id="clip7">
                <rect x="30" y="20" width="40" height="40" transform="rotate(45,50,40)" />
            </clipPath>
        </defs>

        <image href="../imgs/1.png" height="100" width="100"  clip-path="url(#clip7)"/>
    </svg>


    <hr>
    <svg width="400" height="400" viewBox="0 0 100 100" >
        
        <defs>
            <clipPath id="clip8" clipPathUnits="objectBoundingBox">
                <circle cx=".5" cy=".5" r=".5" />
            </clipPath>
        </defs>

        <rect x="10" y="20" width="40" height="40" fill="#fac" clip-path="url(#clip8)"/>
        <rect x="10" y="20" width="40" height="40" fill="none" stroke="#00f" stroke-width=".5" stroke-dasharray="2.5" />
    </svg>
    <svg width="400" height="400" viewBox="0 0 100 100" >
        
        <defs>
            <clipPath id="clip8" clipPathUnits="objectBoundingBox">
                <circle cx=".5" cy=".5" r=".5" />
            </clipPath>
        </defs>

        <rect x="20" y="20" width="50" height="40" fill="#fac" clip-path="url(#clip8)"/>
        <rect x="20" y="20" width="50" height="40" fill="none" stroke="#00f" stroke-width=".5" stroke-dasharray="2.5" />
    </svg>

    <script src="index.js"></script>
</body>
</html>